<!-- Home.vue文件 -->
<template>
 <div class="home-coutainer">
    <h3>Home组件</h3>
    <!-- <router-link :to="{ name: 路由名称, params: { 参数名: 参数值 } }"></router-link> -->
    <!-- <router-link :to="{ name: 'MovieDetails', params: { id: 3 } }">跳转到MovieDetails组件</router-link> -->
    <!--演示push()方法的使用 定义一个按钮，用于跳转到MovieDetails组件，并传递参数 -->
    <!-- 绑定gotoMovie()方法 -->
    <a href="#" @click.prevent="gotoMovie(3)">跳转到MovieDetails组件</a>
    <!-- 为<router-link>标签添加replace属性也能实现与replace()方法类似的效果 -->
    
    <!-- 声明式导航 -->
    <!-- <router-link :to="{ path: '/user' }" replace></router-link> -->

 </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
// 编写gotoMovie()方法，调用router.push()方法实现路由跳转，需要设置要跳转到的路由名称和携带的路由参数
const router = useRouter()
const gotoMovie = movieId => {
    router.push({
        name: 'MovieDetails', params:{id: movieId}
    })
}
// <!-- 编程式导航 -->
// router.replace({ path: '/user' })

</script>


<style scoped>
.home-coutainer{
    min-height: 150px;
    background-color: #f2f2f2;
    padding: 15px;
}
</style>